<template>
  <a-card :bordered="false">
    <div id="toolbar">
      <a-button type="primary" icon="reload" @click="loadAll()">刷新</a-button>
      <UserEditModal @freshData="freshData()"></UserEditModal>
    </div>
    <BootstrapTable ref="table" :columns="columns" :data="tableData" :options="options" />
    <!-- ref是为了方便用this.$refs.modal直接引用，下同 -->
    <summernote-update-modal ref="questionUpdateModal" @ok="handleOk" />
    <question-view-modal ref="modalView" @ok="handleOk" />
    <question-edit-modal ref="modalEdit" @ok="handleOk" />
    <user-edit-modal ref="userEditModal" />
    <user-add-modal ref="userAddModal" />
  </a-card>
</template>

<script>
import '../../plugins/bootstrap-table'
import QuestionViewModal from '../system/modules/QuestionViewModal'
import QuestionEditModal from '../system/modules/QuestionEditModal'
import { questionUpdate, getGradeList } from '@api/exam'
import SummernoteUpdateModal from '@views/list/modules/SummernoteUpdateModal'
import $ from 'jquery'
import UserEditModal from '../../components/tools/UserEditModal.vue'
import UserAddModal from '../../components/tools/UserAddModal.vue'

export default {
  name: 'QuestionTableList',
  components: {
    SummernoteUpdateModal,
    QuestionViewModal,
    QuestionEditModal,
    UserEditModal,
    UserAddModal
  },
  data() {
    const that = this // 方便在bootstrap-table中引用methods
    return {
      index: 0,
      // 表头
      columns: [
        {
          title: '序号',
          field: 'serial',
          formatter: function (value, row, index) {
            return index + 1 // 这样的话每翻一页都会重新从1开始，
          }
        },
        {
          title: '用户名',
          field: 'userUsername',
          formatter: (value, row) => {
            return row.user.userUsername
          }
        },
        {
          title: '角色',
          field: 'role',
          formatter: (value, row) => {
            if (row.user.userRoleId === 1) {
              return "管理员"
            } else if (row.user.userRoleId === 2) {
              return "教师"
            }
            return "学生"
          }
        },
        {
          title: '考试科目',
          field: 'exam',
          formatter: (value, row) => {
            return row.exam.examName
          }
        },
        {
          title: '考试分数',
          field: 'grade',
          formatter: (value, row) => {
            return row.examRecord.examJoinScore
          }
        },
        {
          title: '考试时间',
          field: 'examtime',
          formatter: (value, row) => {
            return row.examRecord.examJoinDate
          }
        },
        {
          title: '考试详情',
          field: 'action',
          align: 'center',
          formatter: (value, row) => {
            return '<button type="button" class="view-record" style="color: white; background-color: #66CCCC; padding: 6px 12px; font-size: 16px; border-color:#66CCCC; border-radius: 0.25rem; height: 38px; vertical-align: middle" type="danger">查看</button>'
          },
          events: {
            'click .view-record': function (e, value, row, index) {
              that.viewExamRecordDetail(row.examRecord)
            }
          }
        }
      ],
      tableData: [], // bootstrap-table的数据
      // custom bootstrap-table
      options: {
        search: true,
        showColumns: true,
        showExport: true,
        pagination: true,
        toolbar: '#toolbar',
        // 下面两行是支持高级搜索，即按照字段搜索
        advancedSearch: true,
        idTable: 'advancedTable',
        // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
        // onClickRow: that.clickRow,
        // onClickCell: that.clickCell // 单元格单击事件
        onDblClickCell: that.dblClickCell // 单元格双击事件
      }
    }
  },
  mounted() {
    this.loadAll() // 加载所有问题的数据
  },
  methods: {
    viewExamRecordDetail (record) {
      // 直接跳到参加考试的页面，查看所有题目的详细情况
      const routeUrl = this.$router.resolve({
        path: `/exam/record/${record.examId}/${record.examRecordId}`
      })
      // 和点击考试卡片效果一样，跳转到考试页面，里面有所有题目的情况，相当于就是详情了
      window.open(routeUrl.href, '_blank')
    },
    freshData(value) {
      console.log(value)
      this.loadAll()
    },
    handleEdit(row) {
      console.log(row)
      this.$refs.userEditModal.create(row)
    },
    handleDelete(row) {
      // 查看题目
      delUser(row).then(res => {
        if (res.code === 0) {
          this.$notification.success({
              message: '删除用户成功',
              description: '删除用户成功'
            })
          this.loadAll()
        } else {
          this.$notification.error({
              message: '删除用户失败',
              description: '删除用户失败'
            })
        }
      })
      this.loadAll
    },
    handleOk() {
      this.loadAll() // 加载所有问题的数据
    },
    loadAll() {
      const that = this
      getGradeList()
        .then(res => {
          if (res.code === 0) {
            that.tableData = res.data
            console.log(res.data)
            that.$refs.table._initTable()
          } else {
            that.$notification.error({
              message: '获取成绩列表失败',
              description: res.msg
            })
          }
        })
    }
  }
}
</script>
